<template>
  <div class="main">
    <!-- <span class="foot-p"></span> -->
    <div class="foot-content">
      <div class="box">
        <div class="left">
          <h3 style="margin-bottom: 25px">{{ t("关于") }}</h3>
          <p v-html="about"></p>
        </div>
        <div class="center">
          <h3 style="margin-bottom: 23px">MAXCASE</h3>
          <p style="line-height: 38px">{{ t("关于MAXCASE") }}</p>
          <p
            style="line-height: 38px"
            @click="$router.push('accountInfo/questionList?aside=2')"
          >
            {{ t("常见问题") }}
          </p>
          <p style="line-height: 38px" @click="$router.push('order')">
            {{ t("我的订单") }}
          </p>
        </div>
        <dvi class="right">
          <h3 style="margin-bottom: 22px">{{ t("联系MAXCASE") }}</h3>
          <img
            src="../assets/footer/footerwx.png"
            alt=""
            style="width: 40px; height: 40px; margin-right: 19px"
          />
          <img
            src="../assets/footer/footerredbook.png"
            alt=""
            style="width: 40px; height: 40px; margin-right: 19px"
          />
          <img
            src="../assets/footer/footerwb.png"
            alt=""
            style="width: 40px; height: 40px; margin-right: 19px"
          />

          <img
            src="../assets/footer/footerkefu.png"
            alt=""
            style="width: 40px; height: 40px; margin-right: 19px"
          />
          <img
            src="../assets/footer/footeremail.png"
            alt=""
            style="width: 40px; height: 40px; margin-right: 19px"
          />
        </dvi>
      </div>
      <div class="footer">{{ t("备案号") }} {{ cyperight }}</div>
    </div>
  </div>
</template>
<script>
import { beianhao } from "@/utils/api";
export default {
  data() {
    return {
      about: "",
      cyperight: "",
    };
  },
  methods: {
    t(v) {
      return this.$t(`底部.${v}`);
    },
    // 获取备案号，协议
    getxieyi() {
      beianhao({ text: "about_us" }).then((res) => {
        console.log("协议----", res.data);
        this.about = res.data.text;
      });
    },
    getbeian() {
      beianhao({ text: "beian" }).then((res) => {
        console.log("备案号--", res.data);
        this.cyperight = res.data.text;
      });
    },
  },
  created() {
    // 获取关于我们
    this.getxieyi();
    // 获取备案号
    this.getbeian();
  },
};
</script>
<style lang="less" scoped>
@import "../styles/var.less";
.main {
  width: 100%;
  height: @bottomNavHeight;

  // .foot-p {
  //   height: @bottomNavHeight;
  // }

  .foot-content {
    background: #333333;
    // height: @bottomNavHeight;
    display: flex;
    color: #fff;
    margin-top: 20px;
    align-items: center;
    flex-direction: column;
    .box {
      width: 1700px;
      display: flex;
      margin-top: 30px;
      justify-content: space-between;
      font-size: 18px;

      background-color: #333333;
      .left {
        width: 700px;
      }
    }
    .footer {
      font-size: 18px;
      margin-top: 80px;
    }
  }
}
</style>
